<template>
	<u--image 
		:src="fixSrc(src)"
		:mode="mode"
		:width="width"
		:height="height"
		:shape="shape"
		:radius="radius"
		:lazyLoad="lazyLoad"
		:showMenuByLongpress="showMenuByLongpress"
		:loadingIcon="loadingIcon"
		:errorIcon="errorIcon"
		:showLoading="showLoading"
		:showError="showError"
		:fade="fade"
		:webp="webp"
		:duration="duration"
		:bgColor="bgColor"
		:customStyle="customStyle"
		@click="$emit('click')"
		@error="$emit('error')"
		@load="$emit('load')"
	>
		<template v-slot:loading>
			<slot name="loading"></slot>
		</template>
		<template v-slot:error>
			<slot name="error"></slot>
		</template>
	</u--image>
</template>

<script>
	export default {
		name: 'r-image',
		props: {
		    // 图片地址
		    src: {
		        type: String,
		        default: ''
		    },
		    // 裁剪模式
		    mode: {
		        type: String,
		        default: 'aspectFill'
		    },
		    // 宽度，单位任意
		    width: {
		        type: [String, Number],
		        default: '300'
		    },
		    // 高度，单位任意
		    height: {
		        type: [String, Number],
		        default: '225'
		    },
		    // 图片形状，circle-圆形，square-方形
		    shape: {
		        type: String,
		        default:'square'
		    },
		    // 圆角，单位任意
		    radius: {
		        type: [String, Number],
		        default: 0
		    },
		    // 是否懒加载，微信小程序、App、百度小程序、字节跳动小程序
		    lazyLoad: {
		        type: Boolean,
		        default: true
		    },
		    // 开启长按图片显示识别微信小程序码菜单
		    showMenuByLongpress: {
		        type: Boolean,
		        default: true
		    },
		    // 加载中的图标，或者小图片
		    loadingIcon: {
		        type: String,
		        default: 'photo'
		    },
		    // 加载失败的图标，或者小图片
		    errorIcon: {
		        type: String,
		        default: 'error-circle'
		    },
		    // 是否显示加载中的图标或者自定义的slot
		    showLoading: {
		        type: Boolean,
		        default: true
		    },
		    // 是否显示加载错误的图标或者自定义的slot
		    showError: {
		        type: Boolean,
		        default: true
		    },
		    // 是否需要淡入效果
		    fade: {
		        type: Boolean,
		        default: true
		    },
		    // 只支持网络资源，只对微信小程序有效
		    webp: {
		        type: Boolean,
		        default: false
		    },
		    // 过渡时间，单位ms
		    duration: {
		        type: [String, Number],
		        default: 500
		    },
		    // 背景颜色，用于深色页面加载图片时，为了和背景色融合
		    bgColor: {
		       type: String,
		       default:' #f3f4f6'
		    },
			// #ifdef MP-WEIXIN
			// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
			options: {
			    virtualHost: true
			}
			// #endif
		},
		methods:{
			fixSrc(src){
				var srcN = src.replace(/@appstatic\//g, `https://dnsverify.pfmoto.com/appstatic/`);
				return srcN;
			}
		}
		
	}
</script>